<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    姓名<input id="name" type="text">
    描述<input id="desc" type="text">
    <button id="submit">提交</button>
    <table>
        <thead>
            <td>id</td>
            <td>姓名</td>
            <td>描述</td>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script src="../jquery/jquery.js"></script>
    <script>

        const URL = 'http://192.168.26.41/todo';

        $('#submit').on('click', () => {
            $.ajax({
                url: URL,
                method: 'post', // restful规范
                data: {
                    name: $('#name').val().trim(),
                    description: $('#desc').val().trim(),
                },
                success(res) {
                    search();
                },
                error(err) {
                    console.log(err);
                },
            });
        });

        // 查
        function search() {
            $.ajax({
                url: URL + '/list',
                method: 'get',
                success(res) {
                    render(res.data);
                },
                error(err) {
                    console.log(err);
                },
            });
        }

        function render(data) {
            for (const d of data) {
                $('tbody').append($(`
                    <tr>
                        <td>${ d.id }</td>
                        <td>${ d.name }</td>
                        <td>${ d.description }</td>
                    </tr>
                `));
            }
        }

        search();


    </script>
</body>
</html>
